<template>
    <div class="chat-page">
        <el-container class="chat-container">
            <el-aside class="chat-aside" width="200px">Aside</el-aside>
            <el-main>
                <!-- 聊天内容区域 -->
                <el-main class="chat-content">
                    <div class="message-container">
                        <div v-for="(message, index) in messages" :key="index" :class="messageClass(message.sender)">
                            <p>{{ message.text }}</p>
                        </div>
                    </div>
                </el-main>
                <!-- 底部输入区域 -->
                <el-footer class="chat-footer">
                    <el-input v-model="newMessage" placeholder="Type a message..." @keyup.enter="sendMessage"
                        class="input-field" />
                    <el-button type="primary" @click="sendMessage">Send</el-button>
                </el-footer>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 定义消息接口
interface Message {
    text: string;
    sender: 'user' | 'bot';
}

const newMessage = ref<string>(''); // 输入的新消息
const messages = ref<Message[]>([
    { text: 'Hello! How can I help you?', sender: 'bot' },
    { text: 'I need assistance with my project.', sender: 'user' }
]);

// 发送消息方法
const sendMessage = () => {
    if (newMessage.value.trim()) {
        // 添加用户消息
        messages.value.push({
            text: newMessage.value,
            sender: 'user'
        });

        // 清空输入框
        newMessage.value = '';

        // 模拟机器人回复
        setTimeout(() => {
            messages.value.push({
                text: 'Here is some help regarding your project!',
                sender: 'bot'
            });
        }, 1000);
    }
};

// 获取消息的样式
const messageClass = (sender: 'user' | 'bot') => {
    return sender === 'user' ? 'message user-message' : 'message bot-message';
};

// 处理点击用户资料按钮的事件
const handleProfileClick = () => {
    console.log('Profile button clicked');
};
</script>

<style lang="scss" scoped>
.chat-page {

    .chat-container {
        display: flex;

        .chat-aside {
            background-color: #171717;

        }
    }
}
</style>
